<!--组件-合约运行列表-->
<template>
  <div>
    <div class="bg bg2 bk1" v-if="isShow">
      <LImage class="texture3" :src="Config.img('texture3.png')"></LImage>
      
      <!--服务器标签-->
      <div class="server-tag bg3">
        <text class="font20 text2">{{item.serverName}}</text>
      </div>
      
      <!--基础信息-->
      <div class="base">

        <div class="column">

          <div class="row aend">
            <text class="font32 text1">{{item.followName ? T(item.followName) : T(item.strategyName)}}</text>
            <text class="font24 text3">{{getStategyType(item)}}</text>
          </div>

          <div class="height14"></div>
          <text class="font20 text3">{{amRun.getParseTime(item.startTime) + '-' + amRun.getParseTime(item.endTime) + '（' + getExecuteTime(item.startTime, item.endTime) + ')'}}</text>
        </div>
        
        <div class="all"></div>
        <text :class="['font28',  (item.states == 'EXECUTE' ?  'main-t1' : 'text3')]">{{getRunState(item)}}</text>
      </div>

      <!--交易所名称-->
      <div class="line bg3"></div>
      <div class="row acenter">
        <text class="font24 text2">{{getExchangeName(item)}}</text>
        <div :class="['direction', Config.upDownBg(item.contract_num, 'direction-red', 'direction-green')]">
          <text :class="['font20',Config.upDownFont(item.contract_num),]">{{item.contract_show}}</text>
        </div>
      </div>

      <!--投入信息-->
      <div class="height20"></div>
      <div class="invest">
        <div class="row">
          <text class="font24 text3">{{T('总投入')+'('+item.investCoin+')'}}</text>
          <div class="all"></div>
          <text class="font24 text3">{{T('总收益')+'('+item.investCoin+')'}}</text>
        </div>

        <div class="height8"></div>
        <div class="row">
          <text class="font32 text1">{{item.investCoinnNum}}</text>
          <div class="all"></div>
          <text :class="['font32', Config.upDownFont(item.realEarnings)]">{{item.realEarnings + '(' + item.realEarningsRate + '%)'}}</text>
        </div>
      </div>

      <!--运行信息-->
      <div class="line bg3"></div>
      <div class="run">

        <div class="run-left">
          <text class="font24 text3">{{T('账户权益')+'('+item.investCoin+')'}}</text>

          <div class="height8"></div>
          <text class="font24 text2">{{'--'}}</text>
        </div>

        <div class="run-left">
          <text class="font24 text3 ">{{T('持仓盈亏')+'('+item.investCoin+')'}}</text>

          <div class="height8"></div>
          <text :class="['font24', Config.upDownFont(item.floatEarnings)]">{{getAddStr(item.floatEarnings)}}</text>
        </div>

        <div class="run-right">
          <text class="font24 text3">{{T('总年化')}}</text>

          <div class="height8"></div>
          <text :class="['font24', Config.upDownFont(item.realYearIncome)]">{{getAddStr(item.realYearIncome)+'%'}}</text>
        </div>
      </div>

      <!--按钮-->
      <div class="but">

        <div class="tag bg3" v-if="getTag(item).length">
          <text class="font24 text3">{{getTag(item)}}</text>
        </div>

        <div class="all"></div>
        <div class="but-row" @click="copyClick(item)"><text class="font24 main-t1">{{T('复制')}}</text></div>
        <div class="but-row" @click="shareClick(item)"><text class="font24 main-t1">{{T('分享')}}</text></div>
        <div class="but-row" @click="detailClick(item)"><text class="font24 main-t1">{{T('详情')}}</text></div>
      </div>
    </div>
  </div>
</template>
    
<script>
import math from "@/_js/math";
import Config from "@/_js/config";
import navigator from "@/_js/navigator";
import amRun from "@/run/amRun";

const weexFunction = weex.requireModule("WeexFunction");

import I18N from "@/_i18n/i18n";
var T = I18N.t;

export default {

  props: {
    item: Object, 
  },

  data() {
    return {
      T: T,
      Config: Config,
      amRun: amRun,
      isShow:false,
    };
  },

  mounted() {

    Config.init(()=>{
      this.isShow = true
    },[Config.OPT_UP_DOWN]);
  },

  methods: {
    /*********************** 获取数据*/
    //获取策略类型-商城、平台、私有、
    getStategyType(item){

      var stategyType = '';
      if (item.strategyCode) {
        stategyType = item.strategyCode;
      } else if (item.executeType == 'FATHER' || item.executeType == 'OFFICIAL') {
        stategyType = T('平台');
      } else  {
        stategyType = T('私有');
      }
      return '（' + stategyType + '）';
    },

    //获取运行状态
    getRunState(item) {
      var state = amRun.getRunState(true, item.isFollow, item.endType);
      return T(state);
    },

    //获交易所名称
    getExchangeName(item){
      var remark = item.remark && item.remark.length ? ('·' + item.remark) : '';
      return (item.apiName + remark + '（' + item.counterCoin + T('永续')+'/' + item.baseCoin + '）');
    },

    //获取标签-活动、跟单、开放跟单
    getTag(item){

      var tag = '';
      var addStr = (tag, str)=>{
        var sign = tag.length ? '、' : '';
        tag = tag + sign + str;
        return tag;
      }

      if (item.activityId != undefined) {
        tag = addStr(tag, T('活动'));
      }
      
      if (item.isFollow) {
        tag = addStr(tag, T('跟单'));
      }

      if (item.isOpenFollow) {
        tag = addStr(tag, T('开放跟单'));
      }

      return tag;
    },

    //获取运行时间长
    getExecuteTime(startTime, endTime){
      var time = amRun.getRunTime(startTime, endTime, T('天'), T('时'), T('分'));
      return time;
    },

    /********************************** Get方法*/
    //获取+字符串
    getAddStr(value) {
      value = math.xiaoShuDelete0(value);
      value = math.addJia(value);
      return value;
    },

    //担保资产率，强迫价
    isShowZero(coin,value) {
      
      if (coin == '%') {
        return math.getNumber(value) == 0 ? '--' : value + '%';
      }

      value = math.xiaoshu(value, math.getCoin(coin));
      return  math.getNumber(value) == 0 ? '--' : value;
    },

    /********************************** 点击触发*/
    //复制
    copyClick(item) {
      this.$emit("copy", item);
    },

    //合约分享点击
    shareClick(item){
     
      var tiem = this.getExecuteTime(item.startTime, item.endTime);
      var pair = item.executeType == 'FATHER' ? (T('多币对')+'('+item.childCount+')')
                                              : (item.counterCoin+T('永续')+'/'+item.baseCoin);
      var param = {'name':item.followName ? item.followName : item.strategyName,
                  'type':item.executeType,
                  'code':item.strategyCode,
                  'totalRate':item.realEarningsRate,
                  'yearRate':item.realYearIncome,
                  'time':tiem,
                  'pair':pair,
                  'contract_show':item.contract_show,
                  'contract_num':item.contract_num};
      weexFunction.shareWeex('share/ShareRunContract',{'param':param});
    },

    //合约详情点击
    detailClick(item){
      var param = {'executeId':item.executeId};
      navigator.open('','runContract/HCRunInfo',param);
    },
  },
};
</script>


<style src="@/_css/style.css"></style>
<style scoped>
.bg {
  border-width: 1px;
  border-radius: 8px;

  padding-top: 40px;
  padding-left: 40px;
  padding-right: 40px;
  padding-bottom: 40px;

  margin-bottom: 20px;
}
.line {
  height: 1px;
  margin-top: 20px;
  margin-bottom: 20px;
}

/*********************** 服务器标题*/
.server-tag {
  position: absolute;
  flex-direction: row;
  align-items: center;
  height: 32px;

  border-bottom-left-radius: 8px;
  border-top-right-radius: 8px;
  padding-left: 14px;
  padding-right: 14px;

  top: 0;
  right: 0;
}

/*********************** 基础信息*/
.base {
  flex-direction: row;
  align-items: center;
}

/*********************** 策略方向*/
.direction {
  border-radius: 4px;

  padding-left: 16px;
  padding-right: 16px;
  padding-top: 2px;
  padding-bottom: 2px;

  margin-left: 20px;
}
.direction-green{
  background-color: rgba(0, 173, 136, 0.1);
}
.direction-red{
  background-color:  rgba(248, 84, 84, 0.1);
}

/*********************** 投入信息*/
.invest {
  flex-direction: column;
  justify-content: space-between;
}

/*********************** 运行信息*/
.run {
  flex-direction: row;
  justify-content: space-between;
}
.run-left{
  flex-direction: column;
}
.run-right {
  flex-direction: column;
  align-items: flex-end;
}

/*********************** 操作按钮*/
.but{
  flex-direction: row;

  margin-top: 40px;
  margin-left: -40px;
  margin-right: -20px;
}
.but-row{
  flex-direction: row;
  align-items: center;
  padding-left: 20px;
  padding-right: 20px;
}

/*********************** 类型标签*/
.tag{
  flex-direction: row;
  align-items: center;
  height: 64px;
  padding-left: 40px;
  padding-right: 50px;
  border-top-right-radius: 32px;
  border-bottom-right-radius: 32px;
}

/*********************** 间距*/
.height8{
  height: 8px;
}
.height14 {
  height: 14px;
}
.height20{
  height: 20px;
}
</style>
